<template>
    <div>
     <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <!-- 添加角色 -->
  <el-button type="primary" @click="dialogFormVisible = true">添加角色</el-button>
  
         <!-- 用户表格 -->
      <el-table :data="rolesList" style="width: 100%" border>
        <el-table-column  type="index" width="80"> </el-table-column>
        <el-table-column type="index" label="#" width="80"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="180">
        </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
       
        <el-table-column label="操作" width="400px">
          <template  slot-scope="scope">
            <div>
              <!-- 编辑 -->
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
              > 编辑</el-button>

              <!-- 删除 -->
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                 @click="open(scope.row.id)"
              > 删除</el-button>
              <!-- 分配 -->
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-setting"      
               
              > 分配权限</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
     <!-- 添加角色弹窗 -->
        <el-dialog
          title="添加角色"
          :visible.sync="dialogFormVisible"
          @close="addDialogClosed"
        >
          <el-form  :model="addRoles" ref="addRoles" :rules="rules" >
            <el-form-item label="角色名称" prop="name" label-width="100px">
              <el-input  v-model="addRoles.name"></el-input>
            </el-form-item>
            <el-form-item label="角色描述"  prop="describe" label-width="100px">
              <el-input v-model="addRoles.describe"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="postAddRolesList">确 定</el-button>
          </div>
        </el-dialog>
          <!-- 编辑弹窗 -->
          <el-dialog
            title="修改角色"
            :visible.sync="editPopUp"
          >
           <el-form  :model="editForm" :rules="rules" >
              <el-form-item label="角色名称" prop="name" label-width="100px">
                <el-input  v-model="editForm.name"></el-input>
              </el-form-item>
              <el-form-item label="角色描述" label-width="100px">
                <el-input  v-model="editForm.describe"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="editPopUp = false">取 消</el-button>
              <el-button type="primary" @click="putEditRoles">确 定</el-button>
            </div>
            
          </el-dialog>
    </div>
</template>

<script>
import { rolesListAPI,addRolesListAPI,editRolesListAPI,delRolesListAPI } from "@/http/api";

export default {
    name: 'index',
    data() {
        return {
     //用来验证添加角色弹窗的form表单
      rules: {
        name: [
          { required: true, message: "请输入角色名称", trigger: "change" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "change",
          },
        ],
      },
            rolesList:[],
            dialogFormVisible:false,
            editPopUp:false,
            addRoles:{
                name:'',
                describe:''
            },
            //修改弹窗表单数据
      editForm: {
        name: "",
        describe: "",
        id: "",
      },
        };
    },
    created(){
        this.getRolesList()

        },
    methods: {
    // 获取角色列表
   async getRolesList(){  
       const res = await rolesListAPI()
       console.log(res);
       this.rolesList = res;
    },
    // resetField()方法 清空表单
    addDialogClosed() {
      this.$refs.addRoles.resetFields();
    },
    // 添加角色
   async postAddRolesList(){
        const res = await addRolesListAPI({roleName:this.addRoles.name,roleDesc:this.addRoles.describe})
        this.getRolesList()
        this.dialogFormVisible = false
    },
    //编辑
    handleEdit(id, obj) {
      this.editPopUp = true;
      this.editForm.name = obj.roleName;
      this.editForm.describe = obj.roleDesc;
      this.editForm.id = obj.id;
      console.log(obj);
    },
    // 编辑角色
    async putEditRoles(){
    const res = await editRolesListAPI(this.editForm.id,
    {roleName:this.editForm.name,roleDesc:this.editForm.describe})
    console.log(res);
    this.editPopUp = false
    this.getRolesList()
    },
    //删除角色
    // 根据Id删除对应的用户信息
    open(id) {
      console.log(id);
     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        //   this.$message({
        //     // type: 'success',
        //     // message: '删除成功!'
        //   });
          delRolesListAPI(id).then(res=>{
              this.getRolesList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },


    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style  lang="scss" scoped>
.el-card {
  box-shadow: 0 1px 1px 0 #ccc !important;
  margin-top: 15px;
}
.el-table{
    margin-top:15px;
}
</style>
